import React from 'react';
import CatImg from '../img/cat.jpg'

// RenderProps
// 术语“render prop”是指一种在React组件之间使用一个值为函数的prop共享代码的简单技术

// 使用Render Props来解决横切关注点（Cross-Cutting Concerns）
// 组件是React代码复用的主要单元，
// 但如何将一个组件封装的状态或行为共享给其他需要相同状态的组件并不总是显而易见。

class Mouse extends React.Component {
    constructor(props) {
      super(props);
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.state = { x: 0, y: 0 };
    }
  
    handleMouseMove(event) {
      this.setState({
        x: event.clientX,
        y: event.clientY
      });
    }
  
    render() {
      return (
        <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
  
          {/* ...但我们如何渲染 <p> 以外的东西? */}
          <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
        </div>
      );
    }
}


// class MouseTracker extends React.Component {
//     constructor(props) {
//       super(props);
//       this.handleMouseMove = this.handleMouseMove.bind(this);
//       this.state = { x: 0, y: 0 };
//     }
  
//     handleMouseMove(event) {
//       this.setState({
//         x: event.clientX,
//         y: event.clientY
//       });
//     }
  
//     render() {
//       return (
//         <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
//           <h1>移动鼠标!</h1>
//           <p>当前的鼠标位置是 ({this.state.x}, {this.state.y})</p>
//         </div>
//       );
//     }
// }


class Cat extends React.PureComponent {
    render() {
        const imageLink = 'https://s21.ax1x.com/2025/06/11/pVkJ4SI.webp';
        const mouse = this.props.mouse;
        return (
            <img src={imageLink} style={{ width: '100px',height: '100px',position: 'absolute', left: mouse.x, top: mouse.y }} />
        );
    }
}

class MouseWithCat extends React.Component {
    constructor(props) {
      super(props);
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.state = { x: 100, y: 100 };
    }
  
    handleMouseMove(event) {
      this.setState({
        x: event.clientX,
        y: event.clientY
      });
    }
  
    render() {
      return (
        <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
  
          {/*
            在这里，我们可以简单地使用 <Cat> 来替换 <p>。但是如果这样
            做的话，当我们每次遇到这样的情况时，就需要创建一个单独的
            <MouseWithSomethingElse>。所以 <MouseWithCat> 并不是真正的可复用组件。
          */}
          <Cat mouse={this.state} />
        </div>
      );
    }
}


class MouseWithCat1 extends React.Component {
    constructor(props) {
      super(props);
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.state = { x: 100, y: 100 };
    }
  
    handleMouseMove(event) {
      this.setState({
        x: event.clientX,
        y: event.clientY
      });
    }
  
    render() {
        console.log('this.props',this.props)
        return (
            <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
    
            {/*
                使用 `render`prop 动态决定要渲染的内容，
                而不是给出一个 <Mouse> 渲染结果的静态表示
            */}
            {this.props.render(this.state)}
            </div>
        );
    }
}


class MouseTracker extends React.Component {
    // 定义为实例方法，`this.renderTheCat`始终
    // 当我们在渲染中使用它时，它指的是相同的函数
    renderTheCat(mouse) {
      return <Cat mouse={mouse} />
    }
  
    render() {
      return (
        <div>
          <MouseWithCat1 render={this.renderTheCat} />
        </div>
      );
    }
}

// 使用Props而非render
export default function RenderProps() {
    return (
        <div>
            <h1>RenderProps</h1>
            {/* <MouseTracker /> */}
            {/* <Mouse /> */}
            {/* <MouseWithCat /> */}

            <MouseTracker />
        </div>
    )
}